<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部 -->
			<cu-custom bgColor="bg-rgb" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">首件质检保存</block>
			</cu-custom>
			<!-- 数据列表 -->
			<form v-if="hasGrade" @submit="handleSubmit">
				<view class="cu-form-group margin-xs radius">
					<view class="title">产品名称：{{objMsg.mechanismName}}</view>
					<view class="">线别：{{objMsg.lineType}}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">生产任务单：</view>
					<label>{{objMsg.commandbillCode}}</label>
				</view>
				<view class="cu-form-group">
					<view class="title">BOM：</view>
					<label>{{objMsg.mechanismCode}}</label>
				</view>
				<view class="cu-form-group">
					<view class="title">客户名称：</view>
					<input placeholder="请输入客户名称" :value="objMsg.clientName" name="customerName"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">软件版本：</view>
					<input placeholder="请输入软件版本" name="softwareVersion"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">芯片型号：</view>
					<input placeholder="请输入芯片型号" name="chipType"></input>
				</view>	
				<view class="cu-form-group">
					<view class="title">LED灯颜色：</view>
					<input placeholder="请输入LED灯颜色" name="ledColor"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">批量/样本数：</view>
					<input placeholder="请输入批量/样本数" name="samplesNum"></input>
				</view>	
				<view class="cu-form-group">
					<view class="title">PCB周期/版本：</view>
					<input placeholder="请输入PCB周期/版本" name="pcbCycle"></input>
				</view>	
				<view class="cu-form-group">
					<view class="title">工艺要求：</view>
					<radio-group name="techReq" class="flex" @change="radioChange('radioItems', 'radioCurrent', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs" v-for="(item, index) in radioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === radioCurrent" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="borderTop">
					<view class="margin-xs padding-sm radius">首件类型：</view>
					<view class="">
						<checkbox-group name="firstType" @change="checkboxChange" class="flex-sub flex justify-start flex-wrap margin-xs">
							<label class="checkBoxWrap cu-form-group" v-for="item in checkBoxItems" :key="item.value">
								<view>
									<checkbox class="blue round margin-right-sm" :class="item.checked?'checked':''" :value="item.value" :checked="item.checked" />
								</view>
								<view>{{item.name}}</view>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="borderTop">
					<view class="margin-xs padding-sm radius">检查内容：</view>
					<view class="" v-for="content in preservationList">
						<view class="text-blue margin-xs padding-sm">{{content.insItem}}</view>
						<view class="basis-xl">
							<view class="cu-form-group flex justify-between">
								<view class="basis-sm">检验记录：</view>
								<textarea class="border" maxlength="-1" placeholder="请输入" v-model="content.insLog"></textarea>
								<!-- <textarea class="border" maxlength="-1" placeholder="请输入" v-model="content.insLog"></textarea> -->
							</view>
							<view class="cu-form-group flex justify-between">
								<view class="basis-sm">不良成因分析/对策：</view>
								<textarea class="border" maxlength="-1" placeholder="请输入" v-model="content.badCauses"></textarea>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-form-group align-start" style="padding-top: 10px;">
					<view class="title">拍照上传</view>
					<button @tap="takephoto()" class="cu-btn bg-rgb shadow lg" style="width: 100px;">拍照上传</button>
				</view>
				<view class="picture-box">
					<view v-for="(item,index) in imglist">
						<image :src="item"></image>
						<view class="btn" @click="deleteImg(index)">删除</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">技术工程：</view>
					<input placeholder="请输入" name="query2"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">生产代表：</view>
					<input placeholder="请输入" name="query3"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">品质代表：</view>
					<input placeholder="请输入" name="query4"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">判断结果：</view>
					<radio-group name="judgeResult" class="flex basis-lg" @change="radioChange('resultRadioItems', 'resultRadioCurrent', $event)">
						<label class="flex-sub flex justify-center align-center margin-xs" v-for="(item, index) in resultRadioItems" :key="item.value">
							<view class="margin-right-sm">
								<radio :value="item.value" :checked="index === resultRadioCurrent" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="button-sub">
					<button form-type="submit" >保存</button>
				</view>
				<!-- <button form-type="submit" class="btns cu-btn bg-rgb lg animation-fade">保存</button> -->
				<!-- <view class="btns" v-if="list.length > 0">
					<button class="cu-btn bg-rgb lg" @click="onSubmitPrin">保存</button>
				</view> -->
			</form>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imglist: [],
				inspectGrade: "",
				materielCode: '',
				list: [],
				preservationList: [],
				objMsg:{},
				radioItems: [{
						value: '有铅',
						name: '有铅'
					},
					{
						value: '无铅',
						name: '无铅'
					},
					{
						value: '红胶',
						name: '红胶'
					}
				],
				radioCurrent: 0,
				resultRadios:[
					{
						value: '是',
						name: '是'
					},
					{
						value: '否',
						name: '否'
					}
				],
				resultRadioItems: [
					{
						value: '合格',
						name: '合格'
					},
					{
						value: '不合格',
						name: '不合格'
					}
				],
				resultRadioCurrent: -1,
				checkBoxItems: [{
						value: '每班首件',
						name: '每班首件'
					},
					{
						value: '转线(机型)',
						name: '转线(机型)'
					},
					{
						value: '新机试产',
						name: '新机试产'
					},
					{
						value: '软件变更',
						name: '软件变更'
					},
					{
						value: '调机(印刷、贴片)',
						name: '调机(印刷、贴片)'
					},
					{
						value: '程序变更',
						name: '程序变更'
					},
					{
						value: '回流焊曲线变更',
						name: '回流焊曲线变更'
					},
					{
						value: '物料变更(主/辅料)',
						name: '物料变更(主/辅料)'
					},
					{
						value: '设计变更',
						name: '设计变更'
					},	
					{
						value: '重大工艺变更',
						name: '重大工艺变更'
					},
					{
						value: '返工',
						name: '返工'
					},
					
				],
				hasGrade: false
			}
		},
		onLoad(e) {
			this.objMsg = uni.getStorageSync('firstPieceQualityInspection');
			console.log(this.objMsg)
			this.qualityTesting()
		},
		methods: {
			deleteImg(index){
				this.imglist.splice(index,1)
			},
			takephoto() {
				let that = this
				let maxUploadNum = 4
				uni.chooseImage({
					count: maxUploadNum, // 最多可以选择的图片张数，默认4
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: (res) => {
						console.log(res);
						const tempFilePaths = res.tempFilePaths
						if((tempFilePaths.length + that.imglist.length) > maxUploadNum){
							return this.modal.show({
								type: 'error',
								content: '最多可上传'+ maxUploadNum +'张图片，请重新选择'
							})
						}
						tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: that.$http.config.baseUrl + 'sys/common/upload',
								filePath: item,
								method: 'POST',
								name: 'file',
								header: {
									'X-Access-Token': uni.getStorageSync('Access-Token')
								},
								success: function(uploadFileRes) {
									// that.imglist = []
									that.modal.show({
										type: 'success',
										content: '上传成功!'
									})
									let result = JSON.parse(uploadFileRes.data)
									if (result.success) {
										that.imglist = [result.message].concat(that.imglist); //concat追加到数组
									} else {
										that.modal.show({
											type: 'error',
											content: result.message
										})
									}
								}
							});
						})
					}
				});
			},
			checkChange(item, evt){
				item.insLog = evt.target.value
			},
			radioChange: function(type, cur, evt) {
				for (let i = 0; i < this[type].length; i++) {
					if (this[type][i].value === evt.target.value) {
						this.cur = i;
						break;
					}
				}
			},
			checkboxChange: function (e) {
				var items = this.checkBoxItems,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
			},
			qualityTesting() {
				uni.showLoading({
					mask:true,
					title:'加载中.....'
				})
				let data = {
					inspectGrade: '201',
					materielCode: this.objMsg.mechanismCode
				}
				this.$http.get('inspect/mesMaterielCheckprojrct/getByGrade', {
					params: data
				}).then(res => {
					uni.hideLoading()
					if (res.data.success) {
						this.list = res.data.result
						if (this.list.length > 0) {
							this.hasGrade =  true
							for (let i = 0; i < this.list.length; i++) {
								let data = {
									insLog: '',
									badCauses: '',
									insItem:this.list[i].projectName,
								}
								this.preservationList.push(data)
							}
							console.log(1111,this.preservationList)
						}
					} else {
						// this.$tip.error(res.data.message)
						this.modal.show({ type:'error', content:res.data.message })
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					}
				})
			},
			handleSubmit(e) {
				
				let {softwareVersion, chipType, ledColor,samplesNum,pcbCycle,techReq, firstType, judgeResult,query2,query3,query4} = e.detail.value
				let {lineType, commandbillCode, mechanismName, mechanismCode} = this.objMsg
				if (softwareVersion.trim().length === 0) {
					this.modal.show({ type:'error', content:'请输入软件版本' })
					return
				}	
				if (chipType.trim().length === 0) {
					this.modal.show({ type:'error', content:'请输入芯片型号' })
					return
				}	
				if (ledColor.trim().length === 0) {
					this.modal.show({ type:'error', content:'请输入LED灯颜色' })
					return
				}	
				if (samplesNum.trim().length === 0) {
					this.modal.show({ type:'error', content:'请输入批量/样本数' })
					return
				}
				if (pcbCycle.trim().length === 0) {
					this.modal.show({ type:'error', content:'请输入PCB周期/版本' })
					return
				}
				if (techReq.trim().length === 0) {
					this.modal.show({ type:'error', content:'请选择工艺要求' })
					return
				}	
				if (firstType.length === 0) {
					this.modal.show({ type:'error', content:'请选择首件类型' })
					return
				}
				let isCheckConetNull = this.preservationList.some(item => {
					return item.insLog.trim().length === 0
				})
				if (isCheckConetNull) {
					this.modal.show({ type:'error', content:'请输入检验记录' })
					return 
				}
				if (query2.length === 0) {
					this.modal.show({ type:'error', content:'请输入技术工程人员' })
					return
				}
				if (query3.length === 0) {
					this.modal.show({ type:'error', content:'请输入生产人员' })
					return
				}
				if (query4.length === 0) {
					this.modal.show({ type:'error', content:'请输入品质人员' })
					return
				}
				if (judgeResult.length === 0) {
					this.modal.show({ type:'error', content:'请选择判断结果' })
					return
				}
				
				e.detail.value.firstType = e.detail.value.firstType.join(',')
				uni.showLoading({
					mask:true,
					title:'加载中.....'
				})
				let image = ''
				this.imglist.forEach((item,index)=>{
					if(this.imglist[index+1]){
						image += item + ','
					}else{
						image += item
					}
				})
				let params = {
					query1: image,
					lineType,
					productNum: commandbillCode,
					productName: mechanismName,
					productBom: mechanismCode,
					firstPieceSmtlogs: this.preservationList,
					...e.detail.value
				}
				this.$http.post('produce/firstPieceSmt/add', params).then(res => {
					uni.hideLoading()
					if (res.data.success) {
						this.modal.show({ type:'success', content:res.data.message })
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000);
					} else {
						this.modal.show({ type:'error', content:res.data.message })
					}
				})
			},
			onSubmitPrin(){
				uni.showModal({
					title: '提示',
					content: '本次质检是否合格',
					cancelText: '不合格',
					confirmText: '合格',
					success: res => {
						if (res.confirm) {
							uni.showModal({
								title: '保存首件质检',
								content: '是否要保存本次质检合格记录？',
								cancelText: '取消',
								confirmText: '确定',
								success: res => {
									if (res.confirm) {
										uni.showLoading({
											mask:true,
											title:'加载中.....'
										})
										let obj ={
											inspectGrade: this.objMsg.produceGrade,
											materielCode: this.objMsg.mechanismCode,
											materielName: this.objMsg.mechanismName,
											relatedCode: this.objMsg.id,
											inspectQualify:'是',
											mesBadnessInfoList:[]
										}
										for(let i = 0 ; i <this.preservationList.length;i++){
											let data ={
												inspectProject: this.preservationList[i].code + '-' +this.preservationList[i].name,
												inspectResult:this.preservationList[i].txt,
												query2:this.preservationList[i].num
											}
											obj.mesBadnessInfoList.push(data);
										}
										this.$http.post('inspect/mesBadnessHandle/appAdd', obj).then(res => {
											uni.hideLoading()
											if (res.data.success) {
												// this.$tip.success(res.data.message);
												this.modal.show({ type:'success', content:res.data.message })
												setTimeout(function() {
													uni.navigateBack({
														delta: 1
													})
												}, 1000);
											} else {
												// this.$tip.error(res.data.message)
												this.modal.show({ type:'error', content:res.data.message })
											}
										})
									}
								}
							})
						}else{
							uni.showModal({
								title: '保存首件质检',
								content: '是否要保存本次质检不合格记录？',
								cancelText: '取消',
								confirmText: '确定',
								success: res => {
									if (res.confirm) {
										uni.showLoading({
											mask:true,
											title:'加载中.....'
										})
										let obj ={
											inspectGrade: this.objMsg.produceGrade,
											materielCode: this.objMsg.mechanismCode,
											materielName: this.objMsg.mechanismName,
											relatedCode: this.objMsg.id,
											inspectQualify:'否',
											mesBadnessInfoList:[]
										}
										for(let i = 0 ; i <this.preservationList.length;i++){
											let data ={
												inspectProject: this.preservationList[i].code + '-' +this.preservationList[i].name,
												inspectResult:this.preservationList[i].txt,
												query2:this.preservationList[i].num
											}
											obj.mesBadnessInfoList.push(data);
										}
										this.$http.post('inspect/mesBadnessHandle/appAdd', obj).then(res => {
											uni.hideLoading()
											if (res.data.success) {
												// this.$tip.success(res.data.message);
                        this.modal.show({ type:'success', content:res.data.message })
												setTimeout(function() {
													uni.navigateBack({
														delta: 1
													})
												}, 1000);
											} else {
												// this.$tip.error(res.data.message)
                        this.modal.show({ type:'error', content:res.data.message })
											}
										})
									}
								}
							})
						}
					}
				})
			},
		},
	}
</script>

<style lang="less">
	.page {
		// padding-bottom: 80rpx;
	}
	.borderTop {
		border-top: 0.5px solid #eee;
	}
	.border {
		border: 0.5px solid #eee;
	}
	.checkBoxWrap.cu-form-group+.cu-form-group {
		border: 0;
	}
	.btns{
		position: fixed;
		z-index: 999;
		background: white;
		bottom: 0;
		height: 80rpx;
		line-height: 100rpx;
	}
	.cu-btn{
		width: 650rpx;
		margin-left: 50rpx;
	}
	// .card {
	// 	margin: 30rpx;
	// 	box-shadow: 0px 0px 5rpx 2rpx rgba(0, 0, 0, 0.1);
	// 	border-radius: 10rpx;
	// 	padding: 30rpx;
	// 	background-color: white;
	// }

	// .card .top {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	border-bottom: 1rpx solid #F0F0F0;
	// 	padding-bottom: 20rpx;
	// 	font-weight: bold;
	// }

	// .card .bottom .box {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	padding: 20rpx 0;
	// }

	// .card .bottom .box .lable {
	// 	width: 25%;
	// }

	// .card .bottom .box .content {
	// 	width: 74%;
	// 	text-align: right;
	// }
	// .boxs{
	// 	display: flex;
	// 	justify-content: space-between;
	// 	padding: 20rpx 0;
	// 	align-items: center;
	// }
	// // .boxs .title{
	// // 	font-weight: bold;
	// // 	padding: 10rpx;
	// // 	border-radius: 10rpx;
	// // 	color: white;;
	// // }
	// .boxs input {
	// 	border: 2rpx solid red;
	// 	height: 60rpx;
	// 	padding: 10rpx;
	// 	border-radius: 10rpx;
	// 	font-size: 20rpx;
	// 	color: red;
	// }
	// .boxs input .input-placeholder{
	// 	color: red;
	// }
	// uni-textarea{
	// 	border: 2rpx solid #F0F0F0;
	// 	padding: 10rpx;
	// 	border-radius: 10rpx;
	// 	font-size: 20rpx;
	// }
	// .list{
	// 	margin-bottom: 120rpx;
	// }
	// .btns{
	// 	position: fixed;
	// 	z-index: 999;
	// 	background: white;
	// 	bottom: 0;
	// 	height: 100rpx;
	// 	line-height: 100rpx;
	// }
	// .cu-btn{
	// 	width: 650rpx;
	// 	margin-left: 50rpx;
	// }
	.picture-box {
		width: 100%;
		margin-top: 10px;
		padding: 0 20rpx;
	
		.picture {
			width: 100%;
			height: 200px;
			margin-bottom: 10px;
		}
		.btn {
			width: 180rpx;
			height: 64rpx;
			margin-bottom: 8rpx;
			line-height: 50rpx;
			color: white;
			border-radius: 30rpx;
			padding: 10rpx 20rpx;
			text-align: center;
			background-image: radial-gradient(circle, #3F55E9, #5F71ED, #7D8CF0);
		}
	}
	.button-sub {
		padding: 30rpx 0;
	
		button {
			color: #fff;
			background-color: #003698;
		}
	}
</style>
